<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			:root {
			    /* 定义气泡弹出框背景色 */
			    --poptipBg: #30363d;
			    /* 弹出框字体颜色 */
			    --color: #fff;
			    /* 弹出框三角形边长 */
			    --triangle: 8px;
			    /* 弹出框与元素的偏移 */
			    --distance: -12px;
			}
			.poptip {
			  position: relative;
			  z-index: 101;
			}
			.poptip::before,
			.poptip::after {
			    visibility: hidden;
			    opacity: 0;
			    transform: translate3d(0, 0, 0);
			    transition: all 0.3s ease 0.2s;
			    box-sizing: border-box;
			  }
			.poptip::before {/* 倒三角形 */
			    content: "";
			    position: absolute;
			    width: 0;
			    height: 0;
			    border-style: solid;
			    border-width: var(--triangle) var(--triangle) 0 var(--triangle);
			    border-color: var(--poptipBg) transparent transparent transparent;
			    left: calc(50% - var(--triangle));
			    top: 0px;
			    transform: translateX(0%) translateY(var(--distance));
			  }
			
			.poptip::after {/* 气泡 */
			    font-size: 14px;
			    color: var(--color);
			    /* 内容为标签内的属性值 */
			    content: attr(aria-controls);
			    position: absolute;
				width: 180px;
			    padding: 6px 12px;
			    white-space: wrap;/* nowrap:不换行;wrap:换行 */
			    z-index: -1;
			    left: 50%;
			    bottom: 100%;
			    transform: translateX(-50%) translateY(var(--distance));
			    background: var(--poptipBg);
			    line-height: 1;
			    border-radius: 2px;
			  }
			.poptip:hover::before,
			.poptip:hover::after {
			    visibility: visible;
			    opacity: 1;
			}
			
			.btn {
			  width: 100px;
			  line-height: 1.5;
			  padding: 5px 10px;
			  color: #fff;
			  background: #00adb5;
			  border-radius: 4px;
			  text-align: center;
			  cursor: pointer;
			  margin: 200px auto;
			}
		</style>
	</head>
	<body>
		<div class="poptip btn" aria-controls="我弹出气泡,我弹出气泡,我弹,我弹,我弹弹弹!">气泡提示</div>
	</body>
</html>

